<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!-- 字符编码声明：UTF-8支持全球多语言字符，确保文本正常显示 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 响应式配置：页面宽度适配设备，初始缩放比1:1，避免移动端变形 -->
    <title>HTML文本与图片标签示例</title>
    <style>
        /* 全局样式：统一页面基础风格，提升可读性 */
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0 auto;
            max-width: 800px;
            padding: 20px;
        }

        /* 图片容器样式：为图片添加边框和内边距，增强视觉层次 */
        .image-container {
            margin: 20px 0;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        /* 文本演示区样式：底部留白，区分不同模块 */
        .text-demo {
            margin-bottom: 30px;
        }

        /* 图片样式：确保图片自适应容器，避免溢出 */
        img {
            max-width: 100%;
            height: auto;
            border-radius: 4px; /* 轻微圆角，优化视觉效果 */
        }

        /* 引用标签样式：增强引用文本的辨识度 */
        blockquote {
            border-left: 3px solid #ddd;
            padding-left: 15px;
            color: #666;
            margin: 10px 0;
        }

        /* 图片标题样式：居中、浅色调，与图片形成区分 */
        figcaption {
            text-align: center;
            color: #666;
            margin-top: 8px;
            font-size: 0.9em;
        }
    </style>
</head>
<body>
    <h1>HTML文本与图片标签演示</h1>

    <!-- 文本标签模块：统一用text-demo类包裹，明确功能分区 -->
    <div class="text-demo">
        <h2>一、文本标签示例</h2>

        <!-- 段落标签：展示p标签的基础用法 -->
        <p>这是一个使用&lt;p&gt;标签定义的段落。p标签是最常用的文本容器之一，用于组织文档中的文本内容，浏览器会自动在段落前后添加换行和留白。</p>

        <!-- 标题标签：说明h1-h6的层级关系 -->
        <h3>1.1 标题标签 (h1-h6)</h3>
        <p>标题标签从h1到h6，字体大小和权重依次递减，语义上代表不同层级的标题：</p>
        <ul>
            <li>&lt;h1&gt;：页面主标题（一个页面建议只出现一次）</li>
            <li>&lt;h2&gt;：二级标题（用于模块分区）</li>
            <li>&lt;h3&gt;-&lt;h6&gt;：次级标题（用于细分内容）</li>
        </ul>

        <!-- 文本格式化标签：按功能分组展示，搭配示例 -->
        <h3>1.2 文本格式化</h3>
        <p>通过以下标签可实现文本样式和语义的双重定义：</p>
        <ul>
            <li>&lt;strong&gt;：<strong>加粗文本</strong>（强调语义，非仅样式）</li>
            <li>&lt;em&gt;：<em>斜体文本</em>（强调语气，非仅样式）</li>
            <li>&lt;u&gt;：<u>下划线文本</u>（表示标注或链接）</li>
            <li>&lt;s&gt;：<s>删除线文本</s>（表示已废弃或修正的内容）</li>
            <li>&lt;mark&gt;：<mark>高亮文本</mark>（突出关键信息）</li>
            <li>&lt;small&gt;：<small>小号文本</small>（用于注释或补充说明）</li>
            <li>&lt;sup&gt;：上标文本，如数学公式 x<sup>2</sup>+y<sup>2</sup></li>
            <li>&lt;sub&gt;：下标文本，如化学公式 H<sub>2</sub>O（水）</li>
        </ul>

        <!-- 引用标签：区分长引用和短引用，补充语义说明 -->
        <h3>1.3 引用文本</h3>
        <!-- blockquote：长引用，语义上表示独立引用内容 -->
        <blockquote>
            这是使用&lt;blockquote&gt;标签的长引用文本。该标签适用于引用较长的段落，浏览器默认会添加左侧边框和缩进，增强视觉区分度。
        </blockquote>

        <!-- q：短引用，语义上表示行内引用，浏览器自动添加引号 -->
        <p>爱因斯坦曾经说过：<q>想象力比知识更重要，因为知识是有限的，而想象力概括着世界上的一切，推动着进步，并且是知识进化的源泉。</q> 这是使用&lt;q&gt;标签的短引用。</p>
    </div>

    <!-- 图片标签模块：统一用image-demo类包裹，明确功能分区 -->
    <div class="image-demo">
        <h2>二、图片标签示例</h2>

        <!-- 基本图片：展示img标签核心属性 -->
        <h3>2.1 基本图片展示</h3>
        <!-- 
            img标签核心属性说明：
            - src：图片资源路径（本地路径或网络URL）
            - alt：图片加载失败时的替代文本，同时提升SEO和无障碍访问
            - width/height：可选，设置图片尺寸（建议通过CSS控制，避免拉伸变形）
        -->
        <img 
            src="https://picsum.photos/600/400?random=1" 
            alt="山水风景图：远处的山脉被云雾环绕，山脚下是平静的湖泊，岸边有绿植" 
            width="600" 
            height="400"
        >
        <p>上述图片通过&lt;img&gt;标签实现，包含src（资源路径）和alt（替代文本）核心属性。</p>

        <!-- 带标题的图片：使用figure+figcaption实现语义化组合 -->
        <h3>2.2 带标题的图片</h3>
        <!-- 
            figure+figcaption语义说明：
            - figure：用于包裹媒体内容（图片、视频等），表示独立的内容单元
            - figcaption：为figure内的媒体内容添加标题，语义上绑定标题与内容
        -->
        <figure>
            <img 
                src="https://picsum.photos/600/300?random=2" 
                alt="城市建筑图：现代都市的高楼大厦，玻璃幕墙反射蓝天，街道整洁" 
                width="600"
            >
            <figcaption>图1：现代城市建筑景观（通过figure和figcaption实现语义化标题）</figcaption>
        </figure>

        <!-- 图片链接：a标签包裹img，实现点击跳转 -->
        <h3>2.3 作为链接的图片</h3>
        <!-- 
            图片链接逻辑：
            - a标签的href属性指定跳转目标URL
            - target="_blank"表示在新窗口打开链接
            - img标签作为a标签的子元素，成为可点击的链接载体
        -->
        <a href="https://picsum.photos" target="_blank">
            <img 
                src="https://picsum.photos/300/200?random=3" 
                alt="缩略图：色彩鲜艳的自然风景，点击可跳转到图片资源网站" 
                width="300" 
                height="200"
            >
        </a>
        <p>点击上方图片，将在新窗口跳转到图片资源网站（图片被&lt;a&gt;标签包裹，成为可点击链接）。</p>
    </div>
</body>
</html>